<template>
	<view class="page">
		<!-- 主体内容区 -->
		<scroll-view scroll-y class="content">
			<!-- 展会Banner -->
			<view class="banner">
				<image class="banner-img"
					src="https://jsshop.iot-yy.cn/uploads/10002/20250506/9e9eb0ac217fa487ce917d37205cb186.png"
					mode="aspectFill" />
			</view>
			<!-- 展会信息 -->
			<view class="expo-info">
				<view class="expo-title">CNF长三角国际消防产业博览会</view>
				<view class="expo-time">2025/05/28 - 2025/05/30</view>
				<button class="register-btn" type="primary" @click="handleRegister">我要报名</button>
			</view>
			<!-- 标签导航 -->
			<view class="tab-nav">
				<view class="tab-item" :class="{ active: activeTab === 'news' }" @click="switchTab('news')">活动资讯</view>
				<view class="tab-item" :class="{ active: activeTab === 'intro' }" @click="switchTab('intro')">介绍</view>
				<view class="tab-item" :class="{ active: activeTab === 'location' }" @click="switchTab('location')">地点
				</view>
			</view>
			<!-- 活动资讯部分的修改 -->
			<view v-if="activeTab === 'news'" class="solution-section">
			    <view class="section-title">产品展示</view>
			    <view class="solution-list">
			        <!-- 产品卡片1 -->
			        <view class="solution-card" @click="handleGoodsItem(10008)">
			            <view class="solution-img-wrapper">
			                <image class="solution-img" src="https://jsshop.iot-yy.cn/uploads/10002/20250414/1983b88219212cb138f0109df465ca02.png" mode="scaleToFit" />
			            </view>
			            <view class="solution-content">
			                <view class="solution-title">电气防火限流式保护器</view>
			                <view class="solution-tags">
			                    <text class="tag">故障限流保护</text>
			                    <text class="tag">超温保护</text>
			                    <text class="tag">故障报警</text>
			                    <text class="tag">远程监控</text>
			                </view>
			            </view>
			        </view>
			        <!-- 产品卡片2 -->
			        <view class="solution-card" @click="handleGoodsItem(10004)">
			            <view class="solution-img-wrapper">
			                <image class="solution-img" src="https://jsshop.iot-yy.cn/uploads/10002/20250412/d3af82704fa44f14b817e7b150146e52.jpg" mode="scaleToFit" />
			            </view>
			            <view class="solution-content">
			                <view class="solution-title">智慧安全用电浸水防触电保护器DBTK380A</view>
			                <view class="solution-tags">
			                    <text class="tag">浸水防触电</text>
			                    <text class="tag">触电不伤人</text>
			                </view>
			            </view>
			        </view>
			        <!-- 产品卡片3 -->
			        <view class="solution-card" @click="handleGoodsItem(10005)">
			            <view class="solution-img-wrapper">
			                <image class="solution-img" src="https://jsshop.iot-yy.cn/uploads/10002/20250412/b40e68c0be352d8dfad19dc9bd38908a.png" mode="scaleToFit" />
			            </view>
			            <view class="solution-content">
			                <view class="solution-title">物联网智能断路器</view>
			                <view class="solution-tags">
			                    <text class="tag">实时监测</text>
			                    <text class="tag">故障预警</text>
			                    <text class="tag">远程控制</text>
			                    <text class="tag">智能化管理</text>
			                </view>
			            </view>
			        </view>
			    </view>
			</view>
			<!-- 展会介绍 -->
			<view v-if="activeTab === 'intro'" class="intro-section">
				<image class="intro-image"
					src="https://jsshop.iot-yy.cn/uploads/10002/20250506/a31665c652c96da3370c7a97bc770b3f.png"
					mode="aspectFill" />
				<view class="intro-content">
					<view class="intro-title">展会简介</view>
					<view class="intro-text">
						CNF长三角国际消防产业博览会（简称：CNF南京国际消防展）将于2025年5月28日至30日在中国·南京国际博览中心举行。
					</view>
					<view class="intro-title">展会亮点</view>
					<view class="highlights-list">
						<view class="highlight-item">
							<uni-icons type="checkmarkempty" size="20" color="#e53935" />
							<text class="highlight-text">汇集500+国内外知名参展企业</text>
						</view>
						<view class="highlight-item">
							<uni-icons type="checkmarkempty" size="20" color="#e53935" />
							<text class="highlight-text">展览面积超50000平方米</text>
						</view>
						<view class="highlight-item">
							<uni-icons type="checkmarkempty" size="20" color="#e53935" />
							<text class="highlight-text">预计专业观众超过10万人次</text>
						</view>
						<view class="highlight-item">
							<uni-icons type="checkmarkempty" size="20" color="#e53935" />
							<text class="highlight-text">30+场专业论坛与技术交流会</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 地点信息 -->
			<view v-if="activeTab === 'location'" class="location-section">
				<image class="location-image"
					src="https://jsshop.iot-yy.cn/uploads/10002/20250506/136a2cd67749bdbe143e872ada536f78.png"
					mode="aspectFill" />
				<view class="location-content">
					  <view class="location-header">
					        <view class="venue-name">中国·南京国际博览中心</view>
					        <button class="navigation-btn" type="primary" size="mini" @click="openLocation">
					            <uni-icons type="location" size="14" color="#ffffff" />
					            <text>导航</text>
					        </button>
					    </view>
					<view class="address-info">
						<view class="address-title">展馆地址</view>
						<view class="address-text">江苏省南京市建邺区江东中路300号</view>
						<view class="transport-title">交通方式</view>
						<view class="transport-item">
							<text class="transport-label">地铁：</text>
							<text class="transport-desc">地铁2号线、3号线元通站，步行10分钟可达</text>
						</view>
						<view class="transport-item">
							<text class="transport-label">公交：</text>
							<text class="transport-desc">69路、D1路、85路到会展中心站</text>
						</view>
						<view class="transport-item">
							<text class="transport-label">自驾：</text>
							<text class="transport-desc">展馆设有地下停车场，可容纳2000辆车</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script lang="ts" setup>
	import { onShareAppMessage,onShareTimeline  } from '@dcloudio/uni-app'
	import { navTo } from '@/core/app'
	// 组件依赖引入
	import { ref } from 'vue';
	const activeTab = ref('news'); // 'news' | 'intro' | 'location'
	const switchTab = (tab : string) => {
		activeTab.value = tab;
	};
	// 好友分享配置
	onShareAppMessage(() => {
	  return {
	    title: '煜耀科技消防展',  // 对应图片中的宣传标语
	    path: '/pages/zhanhui/zhanhui', // 携带分享来源参数
	  }
	})
	// 朋友圈分享配置
	onShareTimeline(() => {
	  return {
	    title: '煜耀科技消防展', // 精简版标题
	  }
	})
	
	// 报名相关逻辑
	const userInfo = ref<any>(null);
	const isLoggedIn = ref(false);
	
	// 处理报名按钮点击
	const handleRegister = async () => {
		// 先直接跳转，在目标页面检查登录状态
		uni.navigateTo({
			url: '/pages/register/register',
			success: () => {
				// 页面跳转动画开始后再执行登录检查
				// setTimeout(() => {
				// 	if (!isLoggedIn.value) {
				// 		wxLogin().catch(() => {
				// 			uni.showToast({
				// 				title: '授权失败',
				// 				icon: 'none'
				// 			});
				// 		});
				// 	}
				// }, 300);
			}
		});
	};
	 const openLocation = () => {
	        uni.openLocation({
	            latitude: 31.996512,  // 南京国际博览中心纬度
	            longitude: 118.719254,  // 南京国际博览中心经度,
	            name: '中国·南京国际博览中心',
	            address: '江苏省南京市建邺区江东中路300号',
	            scale: 18
	        });
	    };
	
	// 优化后的登录方法
	const wxLogin = () => {
	    return new Promise((resolve, reject) => {
	        // 先获取code，再获取用户信息
	        uni.login({
	            provider: 'weixin',
	            success: async (loginRes) => {
	                try {
	                    const loginResult = await uniCloud.callFunction({
	                        name: 'expo-register',
	                        data: {
	                            action: 'loginWithCode',
	                            params: {
	                                code: loginRes.code
	                            }
	                        }
	                    });
	                    
	                    if (loginResult.result?.code === 0) {
	                        // 登录成功后再获取用户信息
	                        uni.getUserProfile({
	                            desc: '用于完善会员资料',
	                            success: (userRes) => {
	                                uni.setStorageSync('userInfo', userRes.userInfo);
	                                isLoggedIn.value = true;
	                                resolve(loginResult.result);
	                            },
	                            fail: reject
	                        });
	                    } else {
	                        reject(new Error(loginResult.result?.message || '登录失败'));
	                    }
	                } catch (error) {
	                    reject(error);
	                }
	            },
	            fail: reject
	        });
	    });
	};
	
	// 检查登录状态
	const checkLoginStatus = () => {
		const token = uni.getStorageSync('token');
		if (token) {
			isLoggedIn.value = true;
			// 可以在这里验证token有效性
		}
	};
	// 跳转商品详情页
	const handleGoodsItem = (goodsId) => {
	    navTo(`pages/goods/detail`, { goodsId })
	};
	
	// 页面加载时检查登录状态
	checkLoginStatus();
</script>
<style>
	page {
		height: 100%;
	}

	.page {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.nav {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		background-color: #ffffff;
		flex-shrink: 0;
	}

	.nav-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.content {
		flex: 1;
		overflow: auto;
	}

	.banner {
		width: 100%;
		height: 400rpx;
	}

	.banner-img {
		width: 100%;
		height: 100%;
	}

	.expo-info {
		padding: 32rpx;
		background-color: #ffffff;
	}

	.expo-title {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
		margin-bottom: 16rpx;
	}

	.expo-time {
		font-size: 14px;
		color: #666666;
		margin-bottom: 32rpx;
	}

	.register-btn {
		width: 100% !important;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 16px;
		border-radius: 44rpx;
		background-color: #e53935 !important;
	}

	.tab-nav {
		display: flex;
		height: 88rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #666666;
		position: relative;
	}

	.tab-item.active {
		color: #333333;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 48rpx;
		height: 4rpx;
		background-color: #e53935;
		border-radius: 2rpx;
	}

	.solution-section {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.section-title {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
		margin: 20rpx 0 20rpx 12rpx;
	}

	.solution-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.solution-card {
		width: calc(50% - 10rpx);
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		padding: 16rpx;
		box-sizing: border-box;
	}

	.solution-img-wrapper {
		width: 100%;
		padding-bottom: 100%;
		position: relative;
		background-color: #ffffff;
		margin-bottom: 16rpx;
	}

	.solution-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.solution-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.solution-title {
		font-size: 14px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 12rpx;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.solution-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8rpx;
	}

	.tag {
		padding: 4rpx 12rpx;
		background-color: #f5f5f5;
		border-radius: 4rpx;
		font-size: 12px;
		color: #666666;
	}

	.solution-card:last-child {
		margin-bottom: 0;
	}

	.share-btn {
		position: absolute;
		right: 24rpx;
		bottom: 24rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 展会介绍样式 */
	.intro-section {
		padding: 32rpx;
	}

	.intro-image {
		width: 100%;
		height: 400rpx;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
	}

	.intro-content {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
	}

	.intro-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 16rpx;
	}

	.intro-text {
		font-size: 14px;
		color: #666666;
		line-height: 1.6;
		margin-bottom: 32rpx;
	}

	.highlights-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.highlight-item {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.highlight-text {
		font-size: 14px;
		color: #333333;
	}

	/* 地点信息样式优化 */
	.location-section {
	    background-color: #ffffff;
	    margin-top: 20rpx;
	}
	
	.location-image {
	    width: 100%;
	    height: 400rpx;
	}
	
	.location-content {
	    padding: 32rpx;
	}
	
	.location-header {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-bottom: 48rpx;
	}
	
	.venue-name {
	    font-size: 20px;
	    font-weight: 600;
	    color: #333333;
	}
	
	.navigation-btn {
	    display: inline-flex;
	    align-items: center;
	    gap: 8rpx;
	    padding: 0 32rpx;
	    height: 64rpx;
	    background-color: #e53935 !important;
	    border-radius: 32rpx;
	}
	
	.address-info {
	    display: flex;
	    flex-direction: column;
	}
	
	.address-title,
	.transport-title {
	    font-size: 16px;
	    font-weight: 500;
	    color: #333333;
	    margin-bottom: 24rpx;
	}
	
	.transport-title {
	    margin-top: 40rpx;
	}
	
	.address-text {
	    font-size: 14px;
	    color: #666666;
	    line-height: 1.6;
	}
	
	.transport-item {
	    display: flex;
	    margin-bottom: 24rpx;
	}
	
	.transport-item:last-child {
	    margin-bottom: 0;
	}
	
	.transport-label {
	    font-size: 14px;
	    color: #666666;
	    width: 100rpx;
	    flex-shrink: 0;
	}
	
	.transport-desc {
	    font-size: 14px;
	    color: #666666;
	    flex: 1;
	    line-height: 1.6;
	}
</style>